<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta  http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>动画效果</title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			
			/* 第1帧的时候存在，起始css，前缀为fade是因为transition内置组件的名称是fade，不起名默认前缀是v- */
			/* .fade-enter{opacity: 0;} */
			/* 第2帧的之后存在，可省略，到达的目标css */
			/* .fade-enter-to{opacity: 1;} */
			/* 结束前都存在，过程 */
			/* .fade-enter-active{transition: opacity 1s;} */
			
			/* 第1帧的时候存在，起始css，可省略 */
			/* .fade-leave{opacity: 1;} */
			/* 第2帧的之后存在，到达的目标css  */
			/* .fade-leave-to{opacity: 0;} */
			/* 结束前都存在 */
			/* .fade-leave-active{transition: opacity 1s;} */
			
			
			/* 过渡动画: */
				/* 以上代码可以简写: fade-enter-to,fade-leave都省略掉，系统会自动添加 */
				.fade-enter,.fade-leave-to{opacity: 0;}
				.fade-enter-active, .fade-leave-active{ transition: opacity 1s} 
				
			/* 关键字动画 */
				@keyframes bounce-in{
					0% {
						transform: scale(0);
					}
					50% {
						transform: scale(1.5);
					}
					100% {
						transform: scale(1);
					}
				}
				.fade2-enter-active {animation: bounce-in 1s; transform-origin: left center;}
				.fade2-leave-active {animation: bounce-in 1s reverse; transform-origin: left center;
				
				
			
		</style>
	</head>
	<body>
		<div id="root">
			<!-- 当属性接受一个变量时，就用v-bind属性，当时一个字符串时则可以省略v-bind -->
			<div>
				过渡动画
			</div>
			<animation-component :prefix = "prefix[0]"></animation-component>
			<hr>
			<div>
				css3动画
			</div>
			<animation-component :prefix = "prefix[1]"></animation-component>
		</div>
	</body>
	<script type="text/javascript">
		
		
		var AnimationComponent = {
			props: ['prefix'],
			template: `<div>
						<transition :name = "prefix" >
							<div v-if="show">hello world</div>
						</transition>
						<button type="button" @click="handleClick()">toggle</button>
						</div>`,
			data: function(){
				return {
					show: true,
				}
			},	
			methods: {
					handleClick: function(){
						<!-- console.log(typeof this.prefix); -->
						this.show = !this.show;
					}
			}
		};
		
		var vm = new Vue({
			el: "#root",
			data: {
				prefix: ["fade","fade2"]
			},
			components:{
				'animation-component': AnimationComponent
			}
		})
	</script>
</html>